<template>
  <div class="online-number">
    <div class="title">
      <span>当前在线用户比例图</span>
    </div>
    <div class="chart">
      <p class="server-num">终端总数:<span>200</span>个</p>
      <div class="chart-box">
        <div class="chart-items">
          <div class="items blue-item" v-for="(item,index) in itemBlue" :key="index"></div>
          <div class="items graw-item" v-for="(item,index) in itemGraw" ></div>
        </div>
        <div class="chart-info">
          <span class="chart-info-span1" >56</span>
          <span class="chart-info-span2" >人在线</span>
        </div>
      </div>
    </div>
    <div class="login-info">
      <div class="info-box">
        <vue-seamless :data="loginInfoList" :class-option="classOption">
          <div class="info-item" v-for="(item,index) in loginInfoList" :key="index">
            <span>{{item.name}}登入系统</span><span>{{item.time}}</span>
          </div>
        </vue-seamless>
      </div>
    </div>
  </div>
</template>

<script type="text/ecmascript-6">
import VueSeamless from 'vue-seamless-scroll'

export default {
  data() {
    return {
      loginInfoList:[
        {
          name:'王鹏www',
          time:'2018/4/5 09:25:31'
        },
        {
          name:'李磊',
          time:'2018/4/5 13:35:37'
        },
        {
          name:'高小虎',
          time:'2018/4/5 08:15:11'
        },
        {
          name:'马龙',
          time:'2018/4/5 10:28:58'
        },
        {
          name:'王鹏',
          time:'2018/4/5 09:25:31'
        },
        {
          name:'李磊',
          time:'2018/4/5 13:35:37'
        },
        {
          name:'高小虎',
          time:'2018/4/5 08:15:11'
        },
        {
          name:'马龙',
          time:'2018/4/5 10:28:58'
        }
      ],
      itemBlue:['0','1','2','3'],
      itemGraw:['0','1','2','3','4','5'],
    }
  },
  components: {
    VueSeamless
  },
  computed: {
    classOption: function () {
      return {
        step: 0.2,
        limitMoveNum: 5
      }
    }
  }
}
</script>

<style scoped lang='scss'>
.online-number{
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  width: 328px;
  height: 238px;
  border: 28px solid;
  border-top: 5px solid;
  // border-right: 28px solid;
  // border-bottom: 20px solid;
  border-left: 5px solid;
  background: transparent;
  border-image: url('../assets/images/33.png') 28 fill repeat;

  .title{
    width: 100%;
    height: 25px;

    span{
      font-size: 16px;
      color: #fff;
      // font-weight: 700;
    }
  }

  .chart{
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    width: 100%;
    height: 60px;
    margin-bottom: 10px;

    .server-num{
      font-size: 12px;
      font-weight: 600;
      color: #47a8b5;

      span{
        color: #fff;
      }
    }

    .chart-box{
      display: flex;
      justify-content: flex-start;
      width: 100%;
      flex: 1;
      // background: #47a8b5;

      .chart-items{
        display: flex;
        justify-content: space-around;
        align-items: center;
        width: 168px;
        height: 100%;
        background: url('../assets/images/percent.png') no-repeat center;
        background-size: contain;
        padding: 0 10px;

        .items{
          width: 9px;
          height: 15px;
          background: rgba(255,255,255,.3);
          transform:skewX(30deg);
        }

        .blue-item{
          background:#47a8b5;
          box-shadow: 0 0 4px 1px #47a8b5;
        }
      }

      .chart-info{
        // display: flex;
        // justify-content: space-around;
        // align-items: flex-end;
        padding-left: 20px;

        .chart-info-span1{
          font-size:32px;
          color:#fff;
          font-weight:700;
        }

        .chart-info-span2{
          font-size:18px;
          color:#47a8b5;
          font-weight:700;
        }
      }
    }
  }

  .login-info{
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    width: 100%;
    flex: 1;

    .info-box{
      width:100%;
      height: 100%;
      padding-top: 10px;
      overflow: hidden;

      .info-item{
        display: flex;
        justify-content: space-between;
        align-items: center;
        width: 100%;
        height: 25%;

        span{
          font-family:"SimSun";
          font-size: 12px;
          color: #47a8b5;
          font-weight: 600;
        }
      }
    }

  }
}
</style>
